<!DOCTYPE html>
<html lang="en">
<head>
    <title>General</title>
    <!-- for-mobile-apps -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- //for-mobile-apps -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/medile.css" rel='stylesheet' type='text/css'/>
    <link href="css/single.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" href="css/contactstyle.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="css/faqstyle.css" type="text/css" media="all"/>
    <!-- font-awesome icons -->
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <!-- //font-awesome icons -->
    <!-- news-css -->
    <link rel="stylesheet" href="news-css/news.css" type="text/css" media="all"/>
    <!-- //news-css -->
    <!-- list-css -->
    <link rel="stylesheet" href="list-css/list.css" type="text/css" media="all"/>
    <!-- //list-css -->
    <!-- js -->
    <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
    <!-- //js -->
    <!---<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>--->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $(".scroll").click(function (event) {
                event.preventDefault();
                $('html,body').animate({scrollTop: $(this.hash).offset().top}, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
    <script src="js/owl.carousel.js"></script>
    <script>
        $(document).ready(function () {
            $("#owl-demo").owlCarousel({

                autoPlay: 3000, //Set AutoPlay to 3 seconds

                items: 5,
                itemsDesktop: [640, 5],
                itemsDesktopSmall: [414, 4]

            });

        });
    </script>
</head>

<body>
<div id="app">
    <!-- header -->
    <div class="header">
        <div class="container">
            <div class="w3layouts_logo">
                <a href="index.html"><h1>One<span>Movies</span></h1></a>
            </div>
            <div class="w3_search">
                <form action="#" method="post">
                    <input type="text" name="Search" placeholder="Search" required="">
                    <input type="submit" value="Go">
                </form>
            </div>
            <div class="w3l_sign_in_register">
                <ul>
                    <li><i class="fa fa-phone" aria-hidden="true"></i> (+000) 123 345 653</li>
                    <li><a href="#" data-toggle="modal" data-target="#myModal">Login</a></li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <!-- //header -->
    <!-- bootstrap-pop-up -->
    <div class="modal video-modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    Sign In & Sign Up
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                </div>
                <section>
                    <div class="modal-body">
                        <div class="w3_login_module">
                            <div class="module form-module">
                                <div class="toggle"><i class="fa fa-times fa-pencil"></i>
                                    <div class="tooltip">Click Me</div>
                                </div>
                                <div class="form">
                                    <h3>Login to your account</h3>
                                    <form action="#" method="post">
                                        <input type="text" name="Username" placeholder="Username" required="">
                                        <input type="password" name="Password" placeholder="Password" required="">
                                        <input type="submit" value="Login">
                                    </form>
                                </div>
                                <div class="form">
                                    <h3>Create an account</h3>
                                    <form action="#" method="post">
                                        <input type="text" name="Username" placeholder="Username" required="">
                                        <input type="password" name="Password" placeholder="Password" required="">
                                        <input type="email" name="Email" placeholder="Email Address" required="">
                                        <input type="text" name="Phone" placeholder="Phone Number" required="">
                                        <input type="submit" value="Register">
                                    </form>
                                </div>
                                <div class="cta"><a href="#">Forgot your password?</a></div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>

    <!-- //bootstrap-pop-up -->
    <!-- nav -->
    <div class="movies_nav">
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header navbar-left">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
                    <nav>
                        <ul class="nav navbar-nav">
                            <li><a href="index.html">首页</a></li>
                            <li><a href="news.html">影讯&amp;购票</a></li>
                            <li><a href="series.html">排行榜</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">分类 <b
                                        class="caret"></b></a>
                                <genres-menus></genres-menus>
                            </li>

                            <li><a href="review.html">影评</a></li>

                            <!--<li><a href="short-codes.html">排行榜</a></li>-->
                            <li><a href="list.html">电影列表</a></li>
                        </ul>
                    </nav>
                </div>
            </nav>
        </div>
    </div>
    <!-- //nav -->
    <div class="general_social_icons">
        <nav class="social">
            <ul>
                <li class="w3_twitter"><a href="#">Twitter <i class="fa fa-twitter"></i></a></li>
                <li class="w3_facebook"><a href="#">Facebook <i class="fa fa-facebook"></i></a></li>
                <li class="w3_dribbble"><a href="#">Dribbble <i class="fa fa-dribbble"></i></a></li>
                <li class="w3_g_plus"><a href="#">Google+ <i class="fa fa-google-plus"></i></a></li>
            </ul>
        </nav>
    </div>

    <!-- /w3l-medile-movies-grids -->
    <div class="general-agileits-w3l">
        <div class="w3l-medile-movies-grids">

            <!-- /movie-browse-agile -->

            <div class="movie-browse-agile">
                <!--/browse-agile-w3ls -->
                <div class="browse-agile-w3ls general-w3ls">
                    <div class="tittle-head">
                        <h4 class="latest-text">{{category.name}}类影片 </h4>
                        <div class="container">
                            <div class="agileits-single-top">
                                <ol class="breadcrumb">
                                    <li><a href="index.html">Home</a></li>
                                    <li class="active">Genres</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="browse-inner">
<!--                            每一个 就是一部电影-->
                            <div v-for="item in page.list" class="col-md-2 w3l-movie-gride-agile">
                                <a v-bind:href="'single.html?id='+item.id" class="hvr-shutter-out-horizontal">
                                    <img v-bind:src="item.cover" height="268" width="182" title="album-name" alt=" "/>
                                    <div class="w3l-action-icon">
                                        <i class="fa fa-play-circle" aria-hidden="true"></i>
                                    </div>
                                </a>
                                <div class="mid-1">
                                    <div class="w3l-movie-text">
                                        <h6><a v-bind:href="'single.html?id='+item.id">{{ item.name }}</a></h6>
                                    </div>
                                    <div class="mid-2">
                                        <p>{{ extractYear(item.releaseDate)}}</p>
                                        <div class="block-stars">
                                            <ul class="w3l-ratings">
                                             <li v-for="s in item.stars">
                                                 <a href="#"><i v-bind:class="s" aria-hidden="true"></i></a>
                                             </li>
                                            </ul>
                                        </div>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div v-show="item.isNew" class="ribben two">
                                    <p>NEW</p>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
                <!--//browse-agile-w3ls -->
                <div class="blog-pagenat-wthree">
                    <ul>
                        <li v-if="page.hasPreviousPage"><a class="frist" href="javascript:void(0)"
                                                           @click="goto(page.prePage)">Prev</a></li>
                        <li v-for="item in page.navigatepageNums">
                            <a v-bind:class="item==page.pageNum?'active':''" href="javascript:void(0)" @click="goto(item)">{{item}}</a>
                        </li>
                        <li v-show="page.hasNextPage"><a class="last" href="javascript:void(0)" @click="goto(page.nextPage)">Next</a></li>
                    </ul>
                </div>
            </div>
            <!-- //movie-browse-agile -->
            <!--body wrapper start-->
            <!--body wrapper start-->
        </div>
        <!-- //w3l-medile-movies-grids -->
    </div>
    <!-- //comedy-w3l-agileits -->
    <!-- footer -->
    <div class="footer">
        <div class="container">
            <div class="w3ls_footer_grid">
                <div class="col-md-6 w3ls_footer_grid_left">
                    <div class="w3ls_footer_grid_left1">
                        <h2>Subscribe to us</h2>
                        <div class="w3ls_footer_grid_left1_pos">
                            <form action="#" method="post">
                                <input type="email" name="email" placeholder="Your email..." required="">
                                <input type="submit" value="Send">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 w3ls_footer_grid_right">
                    <a href="index.html"><h2>One<span>Movies</span></h2></a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="col-md-5 w3ls_footer_grid1_left">
                <p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a
                        href="http://www.cssmoban.com/"
                        target="_blank"
                        title="模板之家">模板之家</a> -
                    Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
            </div>
            <div class="col-md-7 w3ls_footer_grid1_right">
                <ul>
                    <li>
                        <a href="genres3.html">Movies</a>
                    </li>
                    <li>
                        <a href="faq.html">FAQ</a>
                    </li>
                    <li>
                        <a href="horror.html">Action</a>
                    </li>
                    <li>
                        <a href="genres3.html">Adventure</a>
                    </li>
                    <li>
                        <a href="comedy.html">Comedy</a>
                    </li>
                    <li>
                        <a href="icons.html">Icons</a>
                    </li>
                    <li>
                        <a href="contact.html">Contact Us</a>
                    </li>
                </ul>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<script src="/public/js/vue.js"></script>
<script src="/public/js/axios.js"></script>
<script src="/public/js/axios-config.js"></script>
<script src="/public/js/vue-config.js"></script>

<script>

    new Vue({
        el: '#app',
        data: {
            page:{},
            params:{
                pageNum:1,
                pageSize:12,
                cid:null
            },
            category:{}
        },
        methods: {
            loadData(){
                let url = '/api/v1/film/page'
                axios.post(url,this.params)
                    .then(res =>{
                        this.page = res.data
                        const now = new Date()
                        this.page.list.forEach(item =>{
                            const  releaseYear = this.extractYear(item.releaswDate)
                            if(releaseYear == now.getFullYear()){
                                item.isNew = true
                            }
                            item.stars = new Array(5)
                            let score = item.score
                            for (let i = 0; i < 5; i++) {

                                if(score >=2){
                                    item.stars[i] = 'fa fa-star'
                                }else {
                                    if(score < 2 &&score >0){
                                        item.stars[i] ='fa fa-star-half-o'
                                    }else {
                                        item.stars[i] ='fa fa-star-o'
                                    }
                                }
                                score-=2
                            }
                        })
                    })
            },
            loadCategory(){
                let url = `/api/v1/category/detail/${cid}`
                axios.get(url)
                    .then(res =>{
                        if(res.data)
                            this.category = res.data
                        else
                            window.location.href = '/user/404.html'
                    })
            },
            extractYear(dateStr) {
                // 尝试使用 Date 对象解析日期字符串
                const date = new Date(dateStr);
                if (isNaN(date)) {
                    // 如果解析失败，可以使用字符串处理方法（这里假设日期字符串格式为 YYYY-MM-DD）
                    const parts = dateStr.split('-');
                    return parts.length >= 3 ? parseInt(parts[0], 10) : null; // 返回年份或 null（如果格式不正确）
                } else {
                    // 如果解析成功，返回年份
                    return date.getFullYear();
                }
            },
            goto(pn) {
                if (pn != this.page.pageNum) {
                    this.params.pageNum = pn // 修改网页
                    this.loadData() // 翻页：重新查询数据
                }
            }
        },
        mounted() {
            const urlObj = new URL(window.location.href)
            const params = new URLSearchParams(urlObj.search)
            const nid = params.get('id')
            if (nid) {
                this.loadCategory(nid)
                this.params.cid = cid
                this.loadData()
            } else {
                // 如果未在地址后找到id参数，则跳转到404页面
                window.location.href = '/user/404.html'
            }
        }
    })
</script>

<script>
    $('.toggle').click(function () {
        // Switches the Icon
        $(this).children('i').toggleClass('fa-pencil');
        // Switches the forms
        $('.form').animate({
            height: "toggle",
            'padding-top': 'toggle',
            'padding-bottom': 'toggle',
            opacity: "toggle"
        }, "slow");
    });
</script>
<!-- //footer -->
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
    });
</script>
<!-- //Bootstrap Core JavaScript -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
    $(document).ready(function () {
        /*
            var defaults = {
            containerID: 'toTop', // fading element id
            containerHoverID: 'toTopHover', // fading element hover id
            scrollSpeed: 1200,
            easingType: 'linear'
            };
        */

        $().UItoTop({easingType: 'easeOutQuart'});

    });
</script>
<!-- //here ends scrolling icon -->
</body>
</html>